<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-spin :spinning="loading">
      <a-form
        layout="inline"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-form-item label="">
          <a-input
            style="width: 200px"
            placeholder="请输入搜索内容"
            v-model:value="pageable.searchContent"
            allowClear
          />
        </a-form-item>
        <a-form-item label="">
          <a-select
            placeholder="请选择状态"
            v-model:value="pageable.status"
            style="width: 120px"
            allowClear
          >
            <a-select-option
              v-for="(item, idx) in statusOpts"
              :key="idx"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch" html-type="submit">
            搜索
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="addNew" html-type="submit">
            新增
          </a-button>
        </a-form-item>
      </a-form>

      <!-- table start -->
      <a-table
        rowKey="id"
        :defaultExpandAllRows="true"
        :columns="columns"
        :style="{ marginTop: '20px' }"
        :data-source="data"
        :pagination="pageable"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'status'">
            <a-select
              v-model:value="record.status"
              style="width: 120px"
              @change="handleRowStatusChange"
            >
              <a-select-option
                v-for="(item, idx) in statusOpts"
                :key="idx"
                :row="record"
                :value="item.value"
                >{{ item.label }}</a-select-option
              >
            </a-select>
          </template>
          <template v-if="column.key == 'actions'">
            <a-button type="link" @click="edit(record.roleId)">修改 </a-button>
            <a-button type="link" @click="del(record)">删除 </a-button>
          </template>
        </template>
      </a-table>
      <!-- table end -->
      <AddModal ref="addModal" @refreshTable="handleSearch" />
      <EditModal ref="editModal" @refreshTable="handleSearch" />
    </a-spin>
  </a-card>
</template>
<script lang="ts">
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { defineComponent, reactive, ref, UnwrapRef, onMounted } from "vue";
import ResultEnum from "@/config/ResultEnum";
import {
  tableCols,
  loadTable,
  statusOptions,
  changeStatus,
  submitDel,
} from "./index";
import AddModal from "./components/addModal/index.vue";
import EditModal from "./components/editModal/index.vue";
import request from "@/request";
import { confirm } from "@/utils/common";

export default defineComponent({
  components: {
    AddModal,
    EditModal,
  },
  setup() {
    const router = useRouter();
    const loading = ref(false);
    const addModal = ref();
    const editModal = ref();
    const data = ref([]);
    const columns = ref(tableCols);
    const statusOpts = ref(statusOptions);

    const pageable = ref({
      pageSize: 10,
      current: 1,
      total: 0,
      status: null,
      searchContent: "",
    });

    onMounted(() => {
      loadData();
    });

    const handleSearch = () => {
      pageable.value.current = 1;
      pageable.value.total = 0;
      loadData();
    };

    const loadData = () => {
      loading.value = true;
      loadTable({
        page: pageable.value.current,
        limit: pageable.value.pageSize,
        searchContent: pageable.value.searchContent,
        status: pageable.value.status,
      }).then((res: any) => {
        loading.value = false;

        let records = res.records;
        if (records && records.length > 0) {
          let index = 1;
          for (let item of records) {
            item.idx = index;
            item.statusObj = renderStatus(item.status);
            index++;
          }
        }
        data.value = records;
        pageable.value.total = parseInt(res.total);
      });
    };

    const renderStatus = (status: string) => {
      for (let item of statusOpts.value) {
        if (status == item.value) {
          return {
            label: item.label,
            color: item.color,
          };
        }
      }
    };

    //删除
    const del = (record: any) => {
      if (record.isSuperAdmin == "YES") {
        message.warning("超级管理员无法删除");
        return;
      }
      confirm(
        "确认",
        "删除【" + record.roleName + "】?",
        function () {
          submitDel(record.roleId)
            .then((res: any) => {
              message.success("已删除");
              handleSearch();
            })
            .catch((res: string) => {
              message.error(res);
            });
        },
        function () {}
      );
    };

    const addNew = () => {
      addModal.value.display();
    };

    const edit = (id: string) => {
      editModal.value.display(id);
    };

    const handleRowStatusChange = (value: string, option: any) => {
      loading.value = true;
      changeStatus(option.row.tagId, value).then((res: any) => {
        loading.value = false;
        if (res.code == ResultEnum.SUCCESS_CODE) {
          message.success("修改成功");
        } else {
          message.error("修改失败");
        }
      });
    };

    const handleTableChange = (pagination: any, filters: any, sorter: any) => {
      pageable.value.current = pagination.current;
      loadData();
    };

    return {
      loading,
      handleSearch,
      addNew,
      columns,
      data,
      addModal,
      editModal,
      handleRowStatusChange,
      statusOpts,
      edit,
      pageable,
      del,
      handleTableChange,
    };
  },
});
</script>
